<template>
  <van-sticky>
    <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="SrarchProduct">
    <template #action>
      <div @click="SrarchProduct">搜索</div>
    </template>
  </van-search>
</van-sticky>

  <van-swipe :autoplay="3000" lazy-render  :height="300">
  <van-swipe-item v-for="(item, index) in lunboLIst" :key="index" >
    <img :src="item" />
  </van-swipe-item>
</van-swipe>

<van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
  <van-row>
  <van-col span="12" v-for="(item) in productList" :key="item.id" @click="$router.push('/detail?id=' + item.id)" >
    <img :src="item.coverImage" alt="">
    <van-text-ellipsis :content="item.name" expand-text="展开" collapse-text="收起" />
    <span>商品价格{{item.price}}</span>
  </van-col>
</van-row>
  </van-list>
</template>
<script setup>
import {productListRequest,LunboListRequest} from '@/API/home'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let Router=useRouter()
let searchValue=ref('')
const loading = ref(false)
const finished = ref(false)
let lunboLIst=ref([
  "https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202411/20241114132605_29371.jpg",
  "https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202501/20250106174523_38289.jpg",
  "https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202411/20241112164117_43508.jpg",
  "https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202412/20241219114704_66086.jpg"
])
let productList=ref([])
let page=ref(1)
let per=ref(10)
//获取轮播图列表
function GetLunbo(){
  LunboListRequest().then((r)=>{
    console.log(r.data);

  })
}
GetLunbo()
//获取商品列表
function GetProductLIst(){
  productListRequest(page.value,per.value).then((r)=>{
    console.log(r.data);
    productList.value=r.data.data
  })
}
GetProductLIst()
//跳转到搜索页面
function SrarchProduct(){
console.log('search');
}
//实现商品持续加载功能
const onLoad = async () => {
  page.value++ //页码加加
  let r= await productListRequest(page.value,per.value)
  productList.value.push(...r.data.data)
  
  //加载状态结束
  loading.value=false
  //加载完成的话需要对返回的数据进行判断，当返回的数据小于每页显示的数量，说明数据没有更多了
  if(r.data.data.length<per.value){
    finished.value=true
  }
}

</script>



<style scoped>

body {
  width: 100vw;
  height: 100%;
}
.van-swipe-item img {
  width: 100vw;
}
.van-row {
  width:100vw ;
}
.van-col {
  margin-top: 10px;
}
.van-col img{
  width: 48vw;
}
/* .van-search {
  width: 100vw;
  position: fixed;
  left: 0px;
  top: 0px;
} */
</style>
